<template>
  <el-card class="mt-10">
    <div class="chart-container" ref="chartRef"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "PieChart",
};
</script>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
const chartRef = ref();
onMounted(() => {
  const myEchart = echarts.init(chartRef.value);
  const xAxis = [
    "粉面粥店",
    "简餐便当",
    "汉堡披萨",
    "香锅冒菜",
    "小吃炸串",
    "地方菜系",
    "轻食简餐",
  ];
  const data1 = [56, 52, 95, 41, 30, 69, 63];
  const data = xAxis.map((item, index) => {
    return {
      name: item,
      value: data1[index],
    };
  });
  const option = {
    title: [
      {
        text: "品牌分类",
      },
      {
        text: "累计订单量",
        subtext: "406",
        left: "center",
        top: "42%",
        textStyle: {
          fontSize: "16px",
          color: "#999999",
        },
        subtextStyle: {
          fontSize: "24px",
        },
      },
    ],
    legend: {
      right: 100,
      orient: "vertical",
      formatter: function (name: string) {
        const index = xAxis.findIndex((item) => item === name);
        const value = data1[index];
        const percent = (value / data1.reduce((a, b) => a + b, 0)) * 100;
        return `${name} | ${percent.toFixed(2)}%`;
      },
    },
    tooltip: {
      trigger: "item",
      formatter: (data: any) => {
        const percent = (data.value / data1.reduce((p, c) => p + c, 0)) * 100;
        return `品类分布<br /> ${data.name} <br /> 数量：${
          data.value
        } <br />占比：${percent.toFixed(2)}%`;
      },
      // formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    series: {
      type: "pie",
      radius: ["45%", "70%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 3,
        borderColor: "#fff",
        borderWidth: 2,
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     fontSize: "40",
      //     fontWeight: "bold",
      //   },
      // },
      labelLine: {
        show: false,
      },
      data: data,
    },
  };
  myEchart.setOption(option);
});
</script>

<style scoped>
.chart-container {
  height: 300px;
}
</style>
